<!--
 * @作者: kerwin
-->
<template>
  <div class="container">
      <div
          class="news-header"
          :style="{
          backgroundImage:`url(${require('@/assets/newsbg.jpg')})`
      }"
      >

      </div>

      <div class="search">
          <el-popover
              placement="bottom"
              title="检索结果"
              width="50%"
              :visible="visible"
          >
              <template #reference>
                  <el-input
                      v-model="searchText"
                      class="w-50 m-2"
                      placeholder="请输入新闻关键字"
                      :prefix-icon="Search"
                      type="search"
                      size="large"
                      @input="visible=true"
                      @blur="visible= false"
                  />
              </template>
              <!-- <div>11111</div> -->

              <div v-if="searchnewslist.length">
                  <div
                      v-for="data in searchnewslist"
                      :key="data._id"
                      class="search-item"
                      @click="handleChangepage(data._id)"
                  >
                      {{data.title}}
                  </div>
              </div>
              <div v-else>
                  <el-empty
                      description="暂无新闻"
                      :image-size="50"
                  />

              </div>
          </el-popover>
      </div>
      <div class="topnews">
          <el-row :gutter="20">
              <el-col
                  :span="6"
                  v-for="item in topNewsList"
                  :key="item._id"
              >
                  <el-card
                      :body-style="{ padding: '0px' }"
                      shadow="hover"
                      @click="handleChangepage(item._id)"
                  >
                      <div
                          class="image"
                          :style="{
                          backgroundImage:`url(http://localhost:3000${item.cover})`
                      }"
                      >

                      </div>
                      <div style="padding: 14px">
                          <span>{{item.title}}</span>
                          <div class="bottom">
                              <time class="time">{{ whichTime(item.editTime) }}</time>

                          </div>
                      </div>
                  </el-card>
              </el-col>

          </el-row>
      </div>
      <el-tabs
          style="margin:20px"
          v-model="whichTab"
          class="demo-tabs"
      >
          <el-tab-pane
              :key="item.name"
              v-for="item in tablist"
              :label="item.label"
              :name="item.name"
          >

              <el-row :gutter="20">
                  <el-col :span="18">
                      <div
                          v-for="data in tabnews[item.name]"
                          :key="data._id"
                          style="padding:10px;"
                      >
                          <el-card
                              :body-style="{ padding: '0px' }"
                              shadow="hover"
                              @click="handleChangepage(data._id)"
                          >
                              <div
                                  class="tab-image"
                                  :style="{
                          backgroundImage:`url(http://localhost:3000${data.cover})`
                      }"
                              >

                              </div>
                              <div style="padding: 14px;float:left;">
                                  <span>{{data.title}}</span>
                                  <div class="bottom">
                                      <time class="tab-time">{{ whichTime(data.editTime) }}</time>

                                  </div>
                              </div>
                          </el-card>
                      </div>
                  </el-col>
                  <el-col :span="6">
                      <el-timeline>
                          <el-timeline-item
                              v-for="(data, index) in tabnews[item.name]"
                              :key="index"
                              :timestamp="whichTime(data.editTime)"
                          >
                              {{ data.title }}
                          </el-timeline-item>
                      </el-timeline>

                  </el-col>
              </el-row>
          </el-tab-pane>

      </el-tabs>

       <el-backtop :visibility-height="100"/>
  </div>
</template>
<script setup>
import { Search } from "@element-plus/icons-vue";
import { ref, onMounted, computed } from "vue";
import {useRouter} from 'vue-router'
import moment from "moment";
import axios from "axios";
import _ from "lodash";
moment.locale("zh-cn");
const searchText = ref("");
const visible = ref(false);
const newlist = ref([]);

const whichTab = ref(1);
onMounted(async () => {
var res = await axios.get("/webapi/news/list");
//   console.log(res.data)

newlist.value = res.data.data;

//   console.log()
});

const searchnewslist = computed(
() =>
  searchText.value
    ? newlist.value.filter(item => item.title.includes(searchText.value))
    : []
);

const topNewsList = computed(() => newlist.value.slice(0, 4));

const whichTime = time => {
return moment(time).format("lll");
};

const tablist = [
{
  label: "最新动态",
  name: 1
},
{
  label: "典型案例",
  name: 2
},
{
  label: "通知公告",
  name: 3
}
];

const tabnews = computed(() => _.groupBy(newlist.value, item => item.category));

const router = useRouter()
const handleChangepage = (id)=>{
  // console.log(id)

  router.push(`/news/${id}`)
}
</script>

<style scoped lang="scss">
.container {
position: relative;
}

.news-header {
width: 100%;
height: 400px;
background-size: cover;
}
.search {
position: absolute;
top: 300px;
width: 100%;
text-align: center;
.el-input {
  width: 50%;
}
}

.search-item {
height: 50px;
line-height: 50px;
&:hover {
  background: whitesmoke;
  color: red;
}
}

.topnews {
margin: 20px;
.image {
  width: 100%;
  height: 150px;
  background-size: cover;
}
.time {
  font-size: 13px;
  color: gray;
}
}

.tab-image {
width: 150px;
height: 100px;
background-size: cover;
float: left;
}
.tab-time {
font-size: 13px;
color: gray;
}
</style>

